<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2021/11/1
  Time: 15:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fun" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <title>${requestScope.comic.name}</title>
<style>
    a{
        text-decoration: none;
    }
    .pl {
        /*position: fixed;*/
        width: 100%;
        height: 75px;
        text-align: center;
        background: #f2f2f2;
        /*line-height: 50px;*/
    }
    .img-circle {
        width: 35px;
        height: 35px;
        border-radius:50%;
    }
    .stars{
        white-space: nowrap;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .stars li{
        display: inline-block;
        color: #ADADAD;
        font-size: 40px;
    }
</style>
    <script src="${pageContext.request.contextPath}/resources/js/jquery-1.10.1.min.js"></script>
</head>
<body>

<a href="${pageContext.request.contextPath}/comics/index">返回主页</a><br>

<div>
    <div style="width: 500px;">
        <img src="http://192.168.2.149:9000/${requestScope.comic.image}">
        ${requestScope.comic.name}
    </div>
    <div>
        <p>评分</p>
        <ul class="stars">
            <li>★</li>
            <li>★</li>
            <li>★</li>
            <li>★</li>
            <li>★</li>
        </ul>
        总评分:<p>${avgScore}</p>
        <br>
        <button id="btn1" style="display: none" >收藏</button>
        <button id="btn2" style="display: none" >已收藏</button>
    </div>
</div>
<div>
    <p>内容简介</p>
    ${requestScope.comic.introduction}
    <input type="hidden" id="comicId" name="comicId" value="${requestScope.comic.id}">

</div>
<div>
    <c:forEach items="${requestScope.chapterNumberList}" var="chapterNumber">
        <a href="${pageContext.request.contextPath}/comic/${requestScope.comic.pinyin}/chapter/${chapterNumber}">第${chapterNumber}话</a>
    </c:forEach>
</div>
<br/>
<br/>
<br/>
<div>
    <form action="${pageContext.request.contextPath}/comic/${requestScope.comic.pinyin}/comment" >
        <div style="height: 75px">
            <div id="pl" class="pl" >
                <div>
                    <textarea id="newComment" placeholder="留一条评论吧" style="resize:none;width:600px;height:50px;" maxlength="100" name="newComment" ></textarea>
                </div>
                <div>
                    <input type="submit" value="发布评论" onclick="return isNull();">
                    <br>
                </div>
            </div>
        </div>
        <h2>评论区</h2>
            <c:forEach items="${requestScope.comments}" var="comicCommentsVo">
                <table>
                <tr>
                    <td>
                        <a href="${pageContext.request.contextPath}/sys/user/person/home">
                            <img src="http://192.168.2.149:9000/${comicCommentsVo.pic}" alt="头像"
                                 border="1" class="img-circle img-thumbnail" >
                        </a>
                    </td>
                    <td>
                        <font size="5">${comicCommentsVo.nick}</font>
                        <font size="1" color="grey">${fun:replace(comicCommentsVo.comments.commentTime, "T", " ") }</font>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <div align="left">${comicCommentsVo.comments.comment}</div>
                    </td>
                </tr>
        </table>
                <hr width="500px" align="left"/>
            </c:forEach>
        <div style="height: 75px"></div>
    </form>
</div>
</body>
<script>
    var layer=document.createElement("div");
    layer.id="layer";
    var beforeClickedIndex = -1;
    var index = 0;
    var isInit = false;
    $('#btn1').click(function () {
        $.post(
            "${pageContext.request.contextPath}/collect/save",
            {'comicId':$('#comicId').val()},
            function (date){
                $('#btn2').css('display', 'block');
                $('#btn1').css('display', 'none');
            }
        )
        layer.innerHTML = "收藏成功";
        func();
    });
    $('#btn2').click(function (){
        $.post(
            "${pageContext.request.contextPath}/collect/delete",
            {'comicId':$('#comicId').val()},
            function (date){
                $('#btn1').css('display', 'block');
                $('#btn2').css('display', 'none');
            }
        )
        layer.innerHTML = "已取消收藏";
        func();
    });

    function func()
    {
        var style=
            {
                background:"#e4b9c0",
                position:"absolute",
                zIndex:10,
                width:"80px",
                height:"80px",
                left:"900px",
                top:"200px"
            }
        for(var i in style)
            layer.style[i]=style[i];
        if(document.getElementById("layer")==null)
        {
            document.body.appendChild(layer);
            setTimeout("document.body.removeChild(layer)",2000)
        }
    }

    $(function(){
        $.post(
            "${pageContext.request.contextPath}/rank/init",
            {'comicId':$('#comicId').val()},
            function (date){
                if(date.score === null){
                    console.log("null");
                } else {
                    index = date.score/2 - 1;
                    fun1();
                }
            }
        )

        $.post(
            "${pageContext.request.contextPath}/collect/init",
            {'comicId':$('#comicId').val()},
            function (date){
                if(date){
                    $('#btn2').css('display', 'block');
                } else {
                    // $('#btn2').attr('hidden', 'hidden');
                    // $('#btn1').remove('hidden');
                    $('#btn1').css('display', 'block');
                }
            }
        )
        //星星点击事件
        $('li').click(function() {
            $('li').css('color', '#ADADAD');
            index = $(this).index();
            fun1();
        });
    });

    function fun1(){
        for(var i = 1; i <= index+1; i++) {
            $('li:nth-child(' + i + ')').css('color', '#F0AD4E');
        }
        if(index == beforeClickedIndex) {
            beforeClickedIndex = -1;
            $('li').css('color', '#ADADAD');
            $.post(
                "${pageContext.request.contextPath}/rank/remove",
                {'comicId':$('#comicId').val()},
                function (date){
                    layer.innerHTML = "已取消评分";
                    func();
                }
            );
        } else {
            beforeClickedIndex = index;
            for(var i = 1; i <= index+1; i++) {
                $('li:nth-child(' + i + ')').css('color', '#F0AD4E');
            }
            if(isInit){
                $.post(
                    "${pageContext.request.contextPath}/rank/save",
                    {'comicId':$('#comicId').val(), 'score': (index+1)*2},
                    function (date){
                        layer.innerHTML = "评分成功";
                        func();
                        return;
                    }
                );
            }
            isInit = true;
        }
    };

    var tt = pl.offsetTop;
    window.onscroll = function() {
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        if(t > tt) {
            pl.style.position = "fixed";
            Element = document.styleSheets[0].cssRules[0].style;
            Element.removeProperty("Top");
            pl.style.bottom = 0;
        } else if(t < tt) {
            pl.removeAttribute("style");
            //pl.style.position = "absolute";
        } else {
            return false;
        }
    }
    var getStyle = function(dom, attr) {
        return dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, false)[attr];
    }

    function isNull(){
        var comment = document.getElementById("newComment").value;
        if (comment === ""){
            alert("评论内容不能为空！");
            return false;
        }
    }
</script>
</html>
